import cell from "@aotoo/react-cell";
import dropPop from "components/items/droppop";

function template(state, props) {
  const pagingInst1 = ui_list({
    data: pagingAdapter(10, 1),
    listClass: 'ss-page'
  })
  const pagingInst2 = ui_list({
    data: pagingAdapter(10, 2),
    listClass: 'ss-page is-bg center'
  })

  const pagingInst3 = ui_list({
    data: pagingAdapter(10, 2),
    listClass: 'ss-page is-bg center'
  })
  const dpListData = [
    {title: '10条/页', attr:{icon: 'right', id: 'a1', title: '10条/页'}},
    {title: '20条/页', attr:{icon: 'right', id: 'a2', title: '20条/页'}},
  ]
  const dropPopInst = dropPop({popData: dpListData, inputVal: {id: 'a1', title: '10条/页'}, itemClass: 'ss-page-sizes'})
  const pageInput = { title: "前往", id: "haha", value: "1", type: "text" , desc: '页', itemClass: 'ss-page-jump'};

  return (
    <>
      <View className="pages-title-lg">分页</View>
      <View className='mt-default'><Text className='pages-title'>左</Text>{<pagingInst1.UI/>}</View>
      <View className='mt-default'><Text className='pages-title'>居中</Text>{<pagingInst2.UI/>}</View>
      <View className='mt-default'>
        <Text className='pages-title'>右</Text>
        <View className='ss-pagination right'>
          <Text className='ss-page-total'>共 10 条</Text>
          {<dropPopInst.UI/>}
          {<pagingInst3.UI/>}
          {<cell.Text data={pageInput} />}
        </View>
      </View>
    </>
  )
}

export default function(Pager) {
  return Pager({
    template,
    data: {},
    ready() {
    }
  })
}

function pagingAdapter(total, currentPage, isArrow = true) {
  // total 总数  currentPage 当前页数
  let output = []
  for(let i =1; i< total; i++) {
    output.push({
      title: i,
      itemClass: currentPage === i ? 'active' : ''
    })
  }
  output.unshift({
    title: !isArrow ? '上一页' : '',
    itemClass: (isArrow ? 'icon-arrow_left ' : '') + (currentPage === 1 ? 'disabled' : '')
  })
  output.push({
    title: !isArrow ? '下一页' : '',
    itemClass: (isArrow ? 'icon-arrow_right ' : '') + (currentPage === total ? 'disabled' : '')
  })
  return output
}